<template>
  <div class="charge-study-container">
    <floter-header :icon="floterData.icons" :title="floterData.title"></floter-header>
    <div class="get_study_focus">
      
      <!-- Swiper -->
      <swiper ref="mySwiper" class="swiper-area" :options="swiperOptions">
        <swiper-slide v-for="(item, index) in jobGuaidDatas" :key="index">
          <img :src="item.image" alt="" />
          <h5>{{item.title}}</h5>
          <p>{{item.count}}人学习</p>
        </swiper-slide>
      </swiper>
      
    </div>
  </div>
</template>

<script>

import FloterHeader from './home-floter-header'
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

export default {
  data(){
    return {
      jobGuaidDatas:[{
          image:require('@/assets/images/pic2.png'),
          title:'老师教你应对面试技巧',
          count:123,
        }, {
          image:require('@/assets/images/pic1.png'),
          title:'老师教你应对面试技巧',
          count:456,
        }, {
          image:require('@/assets/images/pic2.png'),
          title:'老师教你应对面试技巧',
          count:789,
        }
      ],
      swiperOptions: {
        // 我们可以可以看看到的是 2个半
        slidesPerView: 2.2,
        spaceBetween: 20,
      }
    }
  },
  props:['floterData'],
  computed: {
    swiper() {
        return this.$refs.mySwiper.$swiper
      }
  },
  components:{
    FloterHeader,
    Swiper,
    SwiperSlide
  }
  
}
</script>

<style lang="less" scoped>

.charge-study-container{
  width: 100%;
  height: 100%;
  margin-top: 10px;
  background-color: #fff;

  .get_study_focus {
    margin-top: 10px;
    padding: 15px;

    .swiper-area{
      padding-bottom: 5px;
    }

    .swiper-slide {
      font-size: 18px;
      background: #fff;
      width: 100%;
      height: 100%;
      padding-bottom: 15px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
      h5 {
        font-size: 14px;
        margin: 5px 0;
        font-weight: 400;
        padding: 15px;
      }
      p {
        font-size: 12px;
        color: #ff4400;
        padding: 0 15px;
      }
    }
  }

}

</style>